<template>
	<view class="my">
		<!-- 轮播图 -->
		<u-swiper :list="swiperData" keyName="image" height="150rpx" showTitle autoplay circular></u-swiper>
		<!-- 装饰 -->
		<view class="decorate"></view>
		<!-- 选项 -->
		<view class="selects">
			<u-grid :border="false" col="5">
				<u-grid-item v-for="(listItem,listIndex) in selectCard" :key="listIndex" @click="clickGrid">
					<u--image :showLoading="true" :src="listItem.img" width="30px" height="30px"></u--image>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 个人资料卡片 -->
		<view class="my_card">
			<view class="card_content">
				<u--image :showLoading="true" :src="curHeader" width="75px" height="75px" ></u--image>
				<view class="card_text">
					<text>{{userInfo.nickname}}  ID:{{userInfo.id}}</text>
					<text>内心独白:{{userInfo.info}}</text>
				</view>
			</view>
		</view>
		<!-- 单元格列表 -->
		<view class="cell_list">
			<u-cell-group>
				<u-cell  isLink @click="clickSign">
					<template #icon>
						<u--image :showLoading="true" src="/static/imgs/bjzl.png" width="30px" height="30px"></u--image>
					</template>
					<template #title>
						<view class="one_title">
							<u-tag text="签到" size="mini"></u-tag>
							<text style="color: #ccc;font-size: 26rpx;margin-left: 20rpx;">连续签到七天可获得双倍积分</text>
						</view>
					</template>
				</u-cell>
				<u-cell :title="item.title" isLink v-for="item in cellData" :key="item.title" :url="item.url">
					<template #icon>
						<u--image :showLoading="true" :src="item.img" width="30px" height="30px"></u--image>
					</template>
				</u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script setup>
	import { baseUrl } from '../../utils/request';
	import {onMounted, reactive, ref, watchEffect} from "vue";
	import { useStore } from "vuex";
	import { signReq } from "../../api/user";
	const store=useStore()
	// 拿到用户信息
	const userInfo=ref()
	// 当前用户头像
	const curHeader=ref('')
	// 轮播图数据
	const swiperData = reactive([{
			image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png'
		},
		{
			image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png'
		},
		{
			image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
		},
	])
	// 选项数据
	const selectCard = reactive([{
			img: '/static/imgs/shuaige.png',
			title: '高富帅'
		},
		{
			img: '/static/imgs/baifum.png',
			title: '白富美'
		},
		{
			img: '/static/imgs/caijun.png',
			title: '才俊'
		},
		{
			img: '/static/imgs/dongtai.png',
		 title: '动态'
		},
		{
			img: '/static/imgs/bianji.png',
			title: '择偶要求'
		}
	])
	// 单元格数据
	const cellData=reactive([
		{
			img:'/static/imgs/bjzl.png',
			title:'基本资料',
			url:'/pages/basicInfo/basicInfo',
		},
		{
			img:'/static/imgs/guanz.png',
			title:'关注我的',
			url:'/pages/attention/attention',
		},
		{
			img:'/static/imgs/xiangc.png',
			title:'我的相册',
			url:'/pages/album/album',
		},
		{
			img:'/static/imgs/xianhua.png',
			title:'鲜花礼物',
			url:'/pages/FlowerGift/FlowerGift',
		},
		{
			img:'/static/imgs/fenx.png',
			title:'我要分享',
			url:'/pages/share/share',
		},
	])
	// 点击宫格
	const clickGrid=(name)=>{
		// 编辑择偶要求
		if(name==4){
			uni.navigateTo({
				url:'/pages/selectRequ/selectRequ'
			})
		}
	}
	// 点击签到
	const clickSign=async()=>{
		let res=await signReq()
		if(res.data.code==0){
			uni.showToast({
				title: '登陆成功',
				icon:"success"
			});
		}else{
			uni.showToast({
				title: res.data.errors[0],
				icon:"error"
			});
		}
	}
	onMounted(()=>{
		store.dispatch('user/A_detailed_info',{id:userInfo.value.id})
		
	})
	watchEffect(()=>{
		userInfo.value=store.state.user.data.detailed_info
		curHeader.value= store.state.user.curHeader
	})
</script>

<style lang="scss">
	.my {
		height: 100vh;
		background: #f3f3ed;
		.decorate {
			width: 100%;
			height: 60rpx;
			background-image: linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186));
		}
		.selects{
			position: relative;
			top: -20rpx;
			width: calc(100% - 60rpx);
			padding: 0 30rpx;
			.u-grid{
				height: 170rpx;
				background: #fff;
				align-items: center;
			}
			.u-grid-item{
				height: 100%;
			}
			.grid-text{
				margin-top: 20rpx;
				font-size: 28rpx
			}
		}
		.my_card{
			width: calc(100% - 60rpx);
			padding: 0 30rpx;
			.card_content{
				display: flex;
				height: 150rpx;
				background: #fff;
				padding: 20rpx;
				.card_text{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 40rpx;
					color: #bbb;
					text:nth-child(1){
						color: #000;
						font-weight: bold;
					}
				}
			}
		}
		.cell_list{
			width: calc(100% - 60rpx);
			padding: 0 30rpx;
			margin-top: 20rpx;
			.u-cell-group{
				background: #fff;
				min-height: 500rpx;
				padding: 0 20rpx;
			}
		}
		
	}
</style>
